import React,{ Component,useState } from 'react'
import {
    Button,
    Row,
    Col,
    Spin,
    Icon,
    Card,
    Tabs,
    Input,
    InputNumber,
    Collapse,
    message,
    Modal,
    Dropdown,
    Menu,
} from 'antd';
import { runInAction } from 'mobx'
import { LegionsProTable,LegionsProForm } from 'legions-pro-design';
import { InstanceProForm } from 'legions-pro-design/es/LegionsProForm/interface';
import { InstanceProModal } from 'legions-pro-design/es/LegionsProModal/interface';
import { InstanceProTable } from 'legions-pro-design/es/LegionsProTable/interface';

import ProjectStore from '../../stores/projectStore';
import { IAntdRule,WrappedFormUtils,TableColumnConfig } from 'legions-pro-design/es/interface/antd';
import {ClassOf} from 'legions-pro-design/es/interface'
import { PropertyKeyValueFormFieldsRule } from '../../models/form/propertyFormModel';
import { fullProvider,lazyInject,inject } from 'legions-control-container';
import { HlLabeledValue } from 'legions-lunar/model';
const { Panel } = Collapse;
interface IProps { }
interface IState { }
type IFormRules<FormRules> = {
    [P in keyof FormRules]: IAntdRule[];
}
export interface IHLFormUtils {
    componentModel: InstanceType<typeof LegionsProForm.LabelWithInputModel> |
    InstanceType<typeof LegionsProForm.LabelWithInputNumberModel>|
    InstanceType<typeof LegionsProForm.LabelWithDatePickerModel>|
    InstanceType<typeof LegionsProForm.LabelWithMonthPickerModel>|
    InstanceType<typeof LegionsProForm.LabelWithRangePickerModel>|
    InstanceType<typeof LegionsProForm.LabelWithUploadModel>|
    InstanceType<typeof LegionsProForm.LabelWithSwitchModel>|
    InstanceType<typeof LegionsProForm.LabelWithRadioButtonModel> |
    InstanceType<typeof LegionsProForm.LabelWithTextModel>|
     InstanceType<typeof LegionsProForm.LabelWithSelectModel>
}
interface IRenderCommonComponentOptions {
    name: string;
    placeholder?: string;
    label: string | React.ReactNode;
    rules: IAntdRule[];
    onChange?: (value: HlLabeledValue,newValue) => void;
}
interface IRenderInputComponentOptions extends IRenderCommonComponentOptions {
    type?: 'number' | 'text' | 'textarea';
    disabled?: boolean;
    addonAfter?: React.ReactNode
}
interface IRenderSwitchComponentOptions extends IRenderCommonComponentOptions {
}
interface IRenderRadioButtonComponentOptions extends IRenderCommonComponentOptions {
    options: { label: string; value: string }[]
}
interface IRenderApiComponentOptions {
    switchOptions?: IRenderCommonComponentOptions[] | IRenderCommonComponentOptions;
    apiOptions: IRenderCommonComponentOptions;
    tokenOptions: IRenderCommonComponentOptions & { onEdit?: () => void };
    methodOptions: IRenderCommonComponentOptions;
    paramsOptions: IRenderCommonComponentOptions & { onEdit?: () => void };
    transformOptions: IRenderInputComponentOptions & { onEdit?: () => void };
    vmodelOptions?: IRenderInputComponentOptions & { onEdit?: () => void };
    mappingEntityOptions?:IRenderCommonComponentOptions& { onEdit?: () => void };
}
interface IRenderDataOrginSourceComponentOptions extends IRenderCommonComponentOptions {
    options: { key: string,label: string; value: string }[]
    onAdd?: () => void;
    onEdit?: () => void;
    onDelete?: () => void;
}
interface ITableConfig {
    onReady: (value: InstanceProTable) => void,
    columns: TableColumnConfig<{}>[],
    data: [];
    onAdd: () => void;
    onDelete?: () => void;
}
interface IRenderExecCodeComponentOptions extends IRenderCommonComponentOptions {
    options: { key: string,label: string; value: string }[]
    visible: boolean;
    onSetting?: () => void;
    btnText?: string;
}
interface IRenderFormComponentComponentOptions {
    control: IHLFormUtils['componentModel'];
    form: WrappedFormUtils;
    formRef: InstanceProForm;
    uid: string;
}
@fullProvider(FormBasePropertyConfig)
export default class FormBasePropertyConfig {
    span = {
        labelSpan: 6,
        wrapSpan: 18,
    }
    createTableConfig(formUtils: InstanceType<typeof LegionsProForm.ProFormUtils>,options: ITableConfig) {
        const span = 6
        const wrapSpan = 18;
        const data = [...options.data];
        formUtils.renderCustomConfig({
            iAntdProps: formUtils.createAntdProps('CustomTable',2,'',{ span: 24 }),
            iFormProps: {
                render: (form,antdProps,rule,formRefs) => {
                    let ref = null;
                    
                    return  <LegionsProTable
                        columns={options.columns}
                        bordered
                        uniqueKey="id"
                        onReady={(value) => {
                            ref = value;
                            options.onReady && options.onReady(value)
                        }}
                        footer={() => <React.Fragment><Button onClick={() => {
                            options.onAdd && options.onAdd()
                        }}>添加</Button><Button style={{ marginLeft: '5px' }} type="danger" onClick={() => {
                            options.onDelete && options.onDelete()
                        }}>删除</Button></React.Fragment>}
                        size="small"
                        isOpenRowChange
                        dataSource={data}
                        pagination={false}
                    ></LegionsProTable>
                },
            },
        })
    }
    renderButtonMenu(items: { title: string; onClick: () => void }[]) {
        return (
            <Menu>
                {items.map((item) => {
                    return <Menu.Item>
                        <span onClick={item.onClick}>{item.title}</span>
                    </Menu.Item>
                })}
            </Menu>
        );
    }
    createFormUtils() {
        const formUtils = new  LegionsProForm.ProFormUtils<ProjectStore>({ store: ProjectStore })
        return formUtils;
    }
    createRulesInstance<T>(func: ClassOf<T>,structparame?: Object): IFormRules<T> {
        // @ts-ignore
        const rules = func.createFormRules<func>(func,structparame);
        return rules;
    }
    renderRadioButtonConfig(formUtils:  InstanceType<typeof LegionsProForm.ProFormUtils>,options: IRenderRadioButtonComponentOptions) {
        formUtils.renderRadioButtonConfig({
            iAntdProps: formUtils.createAntdProps(options.name,null,''),
            iFormProps: {
                ...formUtils.createLayout(options.label,this.span.labelSpan,this.span.wrapSpan),
                radio: {
                    options: options.options,
                }
            },
            rules: options.rules,
        })
    }
    renderSwitchConfig(formUtils:  InstanceType<typeof LegionsProForm.ProFormUtils>,options: IRenderSwitchComponentOptions) {
        formUtils.renderSwitchConfig({
            iAntdProps: formUtils.createAntdProps(options.name,null,''),
            iFormProps: {
                ...formUtils.createLayout(options.label,this.span.labelSpan,this.span.wrapSpan),
                onChange: (value: boolean) => {

                },
            },
            rules: options.rules,
        })
    }
    renderInputConfig(formUtils: InstanceType<typeof LegionsProForm.ProFormUtils>,options: IRenderInputComponentOptions) {
        const iFormProps = {};
        if (options.disabled) {
            iFormProps['disabled'] = options.disabled
        }
        if (options.addonAfter) {
            iFormProps['addonAfter'] = options.addonAfter
        }
        formUtils.renderInputConfig({
            iAntdProps: formUtils.createAntdProps(options.name,null,options.placeholder || options.label as string || ''),
            iFormProps: {
                ...formUtils.createLayout(options.label,this.span.labelSpan,this.span.wrapSpan),
                maxLength: '50',
                type: options.type || 'text',
                ...iFormProps
            },
            rules: options.rules,
        })
    }
    createFormComponent(formUtils: InstanceType<typeof LegionsProForm.ProFormUtils>,options: IRenderFormComponentComponentOptions) {
        return formUtils.createFormComponent(
            options.control
            ,options.form,options.uid,options.formRef)
    }
    /** 创建添加代码表单组件配置 */
    createExecCodeConfig(formUtils: InstanceType<typeof LegionsProForm.ProFormUtils>,options: IRenderExecCodeComponentOptions) {
        formUtils.renderCustomConfig({
            iAntdProps: formUtils.createAntdProps(`${options.name}Render`,null,''),
            iFormProps: {
                visible: options.visible,
                render: (form,antdprops,rule,formRef) => {
                    const onchage = {};
                    if (options.onChange) {
                        onchage['onChange'] = options.onChange
                    }
                    return <Row>
                        <Col span={2 * 7 + 7}>
                            {this.createFormComponent(formUtils,{
                                control: formUtils.renderSelectConfig({
                                    iAntdProps: formUtils.createAntdProps(options.name,null,options.placeholder || '请选择'),
                                    iFormProps: {
                                        ...formUtils.createLayout(options.label,8,2 * 7),
                                        // @ts-ignore
                                        options: options.options,
                                        size: 'default',
                                        labelInValue: true,
                                        ...onchage,
                                    },
                                    rules: options.rules,
                                }),
                                form,
                                formRef,
                                uid: formRef.uid,
                            })}
                        </Col>
                        <Col span={3}>
                            <Button type="primary"  style={{width:'60px'}} onClick={() => {
                                options.onSetting && options.onSetting()
                            }}>{options.btnText || '设置'}</Button>
                        </Col>
                    </Row>
                },

            },
        })
        return [formUtils.getFormConfig(`${options.name}Render`)]
    }
    /** 渲染数据源配置项,如购置下拉静态数据,查询条件参数静态数据等 */
    createDataOrginSource(formUtils: InstanceType<typeof LegionsProForm.ProFormUtils>,options: IRenderDataOrginSourceComponentOptions) {
        formUtils.renderCustomConfig({
            iAntdProps: formUtils.createAntdProps(`${options.name}Render`,null,'',{ span: 24 }),
            iFormProps: {
                render: (form,antdprops,rule,formRef) => {
                    return <Row>
                        <Col span={2 * 7 + 3}>
                            {this.createFormComponent(formUtils,{
                                control: formUtils.renderSelectConfig({
                                    iAntdProps: formUtils.createAntdProps(options.name,null,options.placeholder || '请选择'),
                                    iFormProps: {
                                        ...formUtils.createLayout(options.label,8,2 * 7),
                                        // @ts-ignore
                                        options: options.options,
                                        size: 'default',
                                        labelInValue: true,
                                    },
                                    rules: options.rules,
                                }),
                                form,
                                formRef,
                                uid: formRef.uid,
                            })}
                        </Col>
                        <Col span={6 + 1}>
                            <Dropdown overlay={this.renderButtonMenu([{
                                title: '添加',
                                onClick: () => {
                                    options.onAdd()
                                }
                            },{
                                title: '编辑',
                                onClick: () => {
                                    options.onEdit()
                                }
                            },{
                                title: '删除',
                                onClick: () => {
                                    options.onDelete()
                                }
                            }])} placement="bottomLeft">
                                <Button type="primary">操作</Button>
                            </Dropdown>
                        </Col>
                    </Row>
                },

            },
        })
    }
    /** 创建API请求配置组件 */
    createApiParamsComponen(formUtils: InstanceType<typeof LegionsProForm.ProFormUtils>,options: IRenderApiComponentOptions): Array<IHLFormUtils['componentModel']> {
        let switchOptions: IRenderCommonComponentOptions[] = []
        if (!Array.isArray(options.switchOptions)) {
            switchOptions = [options.switchOptions]
        } else {
            switchOptions = options.switchOptions || []
        }
        switchOptions.map((item) => {
            formUtils.renderSwitchConfig({
                iAntdProps: formUtils.createAntdProps(item.name,null,''),
                iFormProps: {
                    ...formUtils.createLayout(item.label,this.span.labelSpan,this.span.wrapSpan),
                    onChange: (value: boolean) => {
                        /* this.field.map((item) => {
                            this.props.store.formProperyOperattionRef.viewModel.setFormState(item,{visible:value}) 
                        }) */
                    },
                },
                rules: item.rules,
            })
        })

        this.renderInputConfig(formUtils,{
            name: options.apiOptions.name,
            label: options.apiOptions.label,
            rules: options.apiOptions.rules
        })
        formUtils.renderSelectConfig({
            iAntdProps: formUtils.createAntdProps(options.methodOptions.name,null,options.methodOptions.placeholder || '请求方式'),
            iFormProps: {
                ...formUtils.createLayout('请求方式',this.span.labelSpan,this.span.wrapSpan),
                options: [
                    { value: 'get',key: 'get' },
                    { value: 'post',key: 'post' },
                ],
            },
            rules: options.methodOptions.rules,
        })
        formUtils.renderCustomConfig({
            iAntdProps: formUtils.createAntdProps(`${options.paramsOptions.name}Render`,null,'',{ span: 24 }),
            iFormProps: {
                render: (form,antdprops,rule,formRef) => {
                    return <Row>
                        <Col span={2 * 9}>
                            {
                                formUtils.createFormComponent(formUtils.renderInputConfig({
                                    iAntdProps: formUtils.createAntdProps(options.paramsOptions.name,null,''),
                                    iFormProps: {
                                        ...formUtils.createLayout(options.paramsOptions.label,8,2 * 7),
                                        disabled: true,
                                    },
                                    rules: options.paramsOptions.rules,
                                }),form,formRef.uid,formRef)
                            }
                        </Col>
                        <Col span={6} style={{ marginTop: '4px' }}>
                            <Button onClick={() => {
                                options.paramsOptions.onEdit && options.paramsOptions.onEdit()
                            }}>编辑表达式</Button>
                        </Col>
                    </Row>
                },
            },
        })

        formUtils.renderCustomConfig({
            iAntdProps: formUtils.createAntdProps(`${options.tokenOptions.name}Render`,null,'',{ span: 24 }),
            iFormProps: {
                render: (form,antdprops,rule,formRef) => {
                    return <Row>
                        <Col span={2 * 9}>
                            {
                                formUtils.createFormComponent(formUtils.renderInputConfig({
                                    iAntdProps: formUtils.createAntdProps(options.tokenOptions.name,null,''),
                                    iFormProps: {
                                        ...formUtils.createLayout(options.tokenOptions.label,8,2 * 7),
                                        disabled: true,
                                    },
                                    rules: options.tokenOptions.rules,
                                }),form,formRef.uid,formRef)
                            }
                        </Col>
                        <Col span={6} style={{ marginTop: '4px' }}>
                            <Button onClick={() => {
                                options.tokenOptions.onEdit && options.tokenOptions.onEdit()
                            }}>编辑表达式</Button>
                        </Col>
                    </Row>
                },
            },
        })
       /*  formUtils.renderCustomConfig({
            iAntdProps: formUtils.createAntdProps(`${options.vmodelOptions.name}Render`,null,'',{ span: 24 }),
            iFormProps: {
                render: (form,antdprops,rule,formRef) => {
                    return <Row>
                        <Col span={2 * 9}>
                            {
                                formUtils.createFormComponent(formUtils.renderInputConfig({
                                    iAntdProps: formUtils.createAntdProps(options.vmodelOptions.name,null,''),
                                    iFormProps: {
                                        ...formUtils.createLayout(options.vmodelOptions.label,8,2 * 7),
                                        disabled: true,
                                    },
                                    rules: options.vmodelOptions.rules,
                                }),form,formRef.uid,formRef)
                            }
                        </Col>
                        <Col span={6} style={{ marginTop: '4px' }}>
                            <Button onClick={() => {
                                options.vmodelOptions.onEdit && options.vmodelOptions.onEdit()
                            }}>编辑表达式</Button>
                        </Col>
                    </Row>
                },
            },
        }) */
        formUtils.renderInputConfig({
            iAntdProps: formUtils.createAntdProps(options.transformOptions.name,null,''),
            iFormProps: {
                ...formUtils.createLayout(options.transformOptions.label,this.span.labelSpan,this.span.wrapSpan),
                maxLength: '50',
                disabled: true,
                addonAfter: (<Button onClick={() => {
                    options.transformOptions.onEdit && options.transformOptions.onEdit()
                }}>编辑表达式</Button>)
            },
            rules: options.transformOptions.rules,
        })
        formUtils.renderInputConfig({
            iAntdProps: formUtils.createAntdProps(options.mappingEntityOptions.name,null,''),
            iFormProps: {
                ...formUtils.createLayout(options.mappingEntityOptions.label,this.span.labelSpan,this.span.wrapSpan),
                maxLength: '50',
                disabled: true,
                addonAfter: (<Button onClick={() => {
                    options.mappingEntityOptions.onEdit && options.mappingEntityOptions.onEdit()
                }}>编辑表达式</Button>)
            },
            rules: options.mappingEntityOptions.rules,
        })
        return [
            formUtils.getFormConfig(options.apiOptions.name),
            formUtils.getFormConfig(options.methodOptions.name),
            formUtils.getFormConfig(`${options.paramsOptions.name}Render`),
            formUtils.getFormConfig(`${options.tokenOptions.name}Render`),
            /* formUtils.getFormConfig(`${options.vmodelOptions.name}Render`), */
            formUtils.getFormConfig(`${options.mappingEntityOptions.name}`),
            formUtils.getFormConfig(`${options.transformOptions.name}`),
            ...switchOptions.map((item) => {
                return formUtils.getFormConfig(item.name)
            }),
        ]
    }
}